<template>
  <div class="channels">
    <div class="channel-grid">
      <div 
        v-for="channel in channels" 
        :key="channel.id" 
        class="channel-item"
      >
        <div class="channel-card"> <!-- 添加 channel-card 容器 -->
          <img :src="channel.image" :alt="channel.title" class="channel-image" />
          <div class="channel-title">{{ channel.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义“频道”页面的频道数据
const channels = [
  {
    id: 1,
    image: 'https://codelover.club/coursefiles/images/film/预告.jpeg',
    title: '#热门#'
  },
  {
    id: 2,
    image: 'https://codelover.club/coursefiles/images/film/美食.jpeg',
    title: '#专题#'
  },
  {
    id: 3,
    image: 'https://codelover.club/coursefiles/images/film/广告.jpeg',
    title: '#自制#'
  },
  {
    id: 4,
    image: 'https://codelover.club/coursefiles/images/film/创意.jpeg',
    title: '#创意#'
  },
  {
    id: 5,
    image: 'https://codelover.club/coursefiles/images/film/励志.jpeg',
    title: '#励志#'
  },
  {
    id: 6,
    image: 'https://codelover.club/coursefiles/images/film/搞笑.jpeg',
    title: '#搞笑#'
  },
  {
    id: 7,
    image: 'https://codelover.club/coursefiles/images/film/动画.jpeg',
    title: '#动漫#'
  }
]
</script>

<style scoped>
.channels {
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  padding: 20px;
}

.channel-item {
  position: relative;
}

.channel-card { /* 新增 channel-card 样式 */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.channel-image {
  width: 100%;
  height: 200px; /* 设置固定高度 */
  object-fit: cover;
}

.channel-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
  padding: 10px;
  text-align: center;
}
</style>